<template>
    <div>
        <el-container>
            <el-header>
                <div style="margin: 0px auto;text-align: left; width: 80%">
                    <el-form :inline="true" :model="query" class="query-form" size="mini">
                        <el-form-item class="query-form-item">
                            <el-input  placeholder="广告分类名称"></el-input>
                        </el-form-item>
                        <el-form-item class="query-form-item">
                            <el-select  placeholder="状态">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="禁用" value="0"></el-option>
                                <el-option label="正常" value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button-group>
                                <el-button type="danger" plain icon="el-icon-refresh" ></el-button>
                                <el-button type="danger" plain icon="search" >查询</el-button>
                                <el-button type="danger" plain @click.native="dialogAddAdvCate=true">新增</el-button>
                            </el-button-group>
                        </el-form-item>
                    </el-form>
                    <el-dialog title="添加广告分类" :visible.sync="dialogAddAdvCate">
                        <el-form >
                            <el-form-item label="名称：" :label-width="formLabelWidth">
                                <el-input  autocomplete="off" ></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogAddAdvCate = false">取 消</el-button>
                            <el-button type="danger" plain @click="dialogAddAdvCate = false">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-header>
            <el-divider></el-divider>
            <el-main>
                <div style="margin: 10px auto; width: 80%">
                    <el-table
                        :data="tableData"
                        style="width: 100%">
                        <el-table-column
                        label="编号"
                        width="230"
                        prop="id">
                        
                        </el-table-column>
                        <el-table-column
                        label="分类名称"
                        width="200"
                        prop="name">
                        
                        </el-table-column>
                        
                        <el-table-column
                        label="状态"
                        width="200"
                        prop="status">
                        
                        </el-table-column>
                        
                        
                        <el-table-column label="操作">
                        <template slot-scope="scope">
                            
                            <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
            <el-footer>
                <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="100">
                </el-pagination>
            </el-footer>
        </el-container>
        
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        
        return {
            dialogAddAdvCate: false,
            formLabelWidth: '120px',
            roleAuthenticate: false,
            
            value: [],
            tableData: [
                {
                    id: '001',
                    name: '轮播图',
                    status: '正常',
                    
                }, 
                {
                    id: '002',
                    name: '快讯',
                    status: '正常',
                    
                },
                {
                    id: '003',
                    name: 'banner',
                    status: '正常',
                   
                }
            ]
        }
    },
    methods: {
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        toAuthorizations(row) {
            this.roleAuthenticate = true
            console.log(this.value)
        },
        // 分页的方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
